<template>
  <div>
    <el-table v-loading="isLoading" :data="list" border style="width: 100%">
      <el-table-column align="center" :index="getIndex" type="index" label="序号"></el-table-column>
      <el-table-column align="center" width="150px" prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column align="center" prop="title" label="名称"></el-table-column>
      <el-table-column align="center" prop="category" label="商品类目"></el-table-column>
      <el-table-column align="center" prop="c_item" label="二级目录"></el-table-column>
      <el-table-column align="center" prop="price" label="商品价格"></el-table-column>
      <el-table-column align="center" prop="price_off" label="折扣价格"></el-table-column>
      <el-table-column align="center" prop="unit" label="计量单位"></el-table-column>
      <el-table-column align="center" prop="inventory" label="商品库存量"></el-table-column>
      <el-table-column align="center" prop="sale" label="商品销量"></el-table-column>
      <el-table-column align="center" width="150px" label="操作">
        <template slot-scope="scope">
        <el-row>
          <el-col :span="12">
            <el-button size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
          </el-col>
          <el-col :span="12">
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </el-col>
        </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      layout="prev, pager, next"
      background
      :total="total"
      :page-size="size"
      @current-change="handleCurrentChange"
      :current-page="current"
    ></el-pagination>
  </div>
</template>

<script>
import { setDateFormat } from "@/utils";
import {mapState} from 'vuex';
export default {
  props: ["cateNameList", "goodsList", "total", "current", "size"],
  created() {},
  data() {
    return {};
  },
  computed: {
    list() {
      return this.goodsList.map((it) => {
        let category = this.cateNameList.find(
          (item) => item.key === it.category
        ).value;
        let updateTime = setDateFormat(it.updateTime);

        return {
          ...it,
          category,
          updateTime,
        };
      });
    },
    ...mapState({
      isLoading: "isLoading"
    })
  },
  methods: {
    getIndex(index) {
      return index + 1;
    },
    handleCurrentChange(page) {
      this.$emit("pageChange", page);
    },
    handleDelete(id){
      this.$emit('delete',id);
    },
    handleEdit(id){
      console.log(id);
      this.$router.push({
        name : "GoodEdit",
        params:{
          id
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
  .page{
    margin: 20px 0;
    text-align: center;
  }
</style>